<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>开始使用layui</title>
<link rel="shortcut icon" href="#" />
<link rel="stylesheet" href="./layui/css/layui.css">
<script src="./layui/layui.js"></script>
</head>
<body>

<div style="background: #eee;height: 50px;width: 100%;text-align: center;line-height: 50px;">头部面板</div>
<div style="display: flex;flex-direction: row;">
	<div style="width: 50px;height: 800px;padding: 2px;text-align: center;"> 主题
		<div onClick="changeTheme('normal')" style="width: 30px;height: 30px;background: #3caee4;margin: 5px auto;cursor: pointer;"></div>
		<div onClick="changeTheme('red')" style="width: 30px;height: 30px;background: red;margin: 5px auto;cursor: pointer;"></div>
		<div onClick="changeTheme('green')" style="width: 30px;height: 30px;background: #1ce45a;margin: 5px auto;cursor: pointer;"></div>
		<div onClick="changeTheme('black')" style="width: 30px;height: 30px;background: #000000;margin: 5px auto;cursor: pointer;"></div>
		<div onClick="changeTheme('gray')" style="width: 30px;height: 30px;background: #6f6f6f;margin: 5px auto;cursor: pointer;"></div>
	</div>
	<div style="flex:1;overflow: hidden;display: block;text-align: center;">
		<div id="org_charts"></div>
	</div>
</div>

<script>
layui.config({
	base: './layui/lay/mymod/'
})

layui.use(['orgCharts', 'jquery'], function(orgCharts,$) {
//初始化组件  
	orgCharts.init({
		id: "org_charts", //必填
		theme: '', //可选
		success: function() { //可选
			//console.log("初始化完成")
		},
		error: function(e) { //可选
			//console.log(e);
		},
		onClick: function(el, data) { //点击方法  el被点击的元素  data对应传入数据
			//console.log(data.id);
			alert('点击了' + data.name);
		}
	});
	orgCharts.drawByUrl({
		url: 'data/data.json', //必选  返回格式参考 data/data.json
		success: function() { //可选
			//console.log("绘制化完成");
		},
		error: function(e) { //可选
			//console.log('绘制失败');
		}
	});
	window.changeTheme = function(theme) {
		orgCharts.setTheme(theme);
	}

})
</script>
</body>
</html>
